
import React from 'react';


import styles from './CountPoint.css';
import {Table, message, Form, Button, Select, DatePicker, Divider} from 'antd';
import PointService from "../../business/point/PointService";
const { Option } = Select;
const {  RangePicker } = DatePicker;

const ExportJsonExcel = require('js-export-excel');

class CountPoint extends React.Component{

  constructor(props) {
    super(props);
    this.pointService =new PointService();
    this.callBackQueryList = this.callBackQueryList.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.dataChange = this.dataChange.bind(this);
    this.selectRole = this.selectRole.bind(this);
    this.exportExcel = this.exportExcel.bind(this);

  }
  pointService:PointService;
  state ={
    pointData:[],
    countType:'',
    loading:false,
    exchange:false,
    start:'',
    end:'',
  }
  columnsUserGroup = [{
    title: '团队',
    dataIndex: 'userGroup',
    key: 'userGroup',
    render:(text,record)=>{
      if(text ==null){
        return '未分组';
      }
      return text;
    }
  }, {
    title: '历史累计积分',
    dataIndex: 'points',
    key: 'points',
  }];

  columnsUmId = [{
    title: '团队',
    dataIndex: 'userGroup',
    key: 'userGroup',
    render:(text,record)=>{
      if(text ==null){
        return '未分组';
      }
      return text;
    }
  }, {
    title: '用户UM_ID',
    dataIndex: 'umId',
    key: 'umId',
  }, {
    title: '历史累计积分',
    dataIndex: 'points',
    key: 'points',
  }];

  callBackQueryList(res,isSuccess){
    if(!isSuccess || res.code !="200"){
      message.info(res.message);
    }else{
      this.setState({pointData: res.data,exchange:true});
    }
    this.setState({
      loading:false,
    });
  }
  show(pointData:any[],countType,exchange){
    if(pointData.length !=0 &&exchange){
      if(countType == '1'){
        return (<Table columns={this.columnsUmId} dataSource={pointData} rowKey={record=>record.umId} />);
      }else{
        return (<Table columns={this.columnsUserGroup} dataSource={pointData} rowKey={record=>record.userGroup} />);

      }
    }else{
      return "";
    }

  }
  handleSubmit(e){
    e.preventDefault();
    const {countType,start,end} =this.state;
    if(countType ==''||start==''||end ==''){
      message.info("请选择时间或统计方式");
      return;
    }
    let token = sessionStorage.getItem('adminLoginToken');
    let data ={
      start:start,
      end:end,
    }
    if(countType == '1'){
      this.pointService.countByUmId(data,token,this.callBackQueryList);
    }else{
      this.pointService.countByUserGroup(data,token,this.callBackQueryList);
    }
    this.setState({
      loading:true,
    });
  }

  dataChange(e,dateStrings) {
    this.state.start = dateStrings[0];
    this.state.end = dateStrings[1];
    this.setState({
      start:dateStrings[0],
      end:dateStrings[1],
      exchange:false,
      pointData:[],
    });
  }
  selectRole(value) {
    this.setState({
      countType : value,
      exchange:false,
      pointData:[],
    });
  }

  fileName(countType,start,end){
    let type ='个人';
    if(countType != '1'){
      type ='团队';
    }
    return type +"累计积分排行榜"+start+'~'+end;
  }
  sheetName(countType){
    let type ='个人';
    if(countType != '1'){
      type ='团队';
    }
    return type +"累计积分排行榜";
  }

  showHeader(countType){
    if(countType == '1'){
      return ['团队','用户名','积分'];
    }else{
      return ['团队','积分'];
    }
  }
  showContent(countType,pointData){
    let content = [];
    pointData.forEach(points=>{
      let point ={};
      if(countType == '1'){
        point = {
          one:points.userGroup==null?'未分组':points.userGroup,
          two:points.umId,
          three:points.points
        }
      }else{
        point = {
          one:points.userGroup==null?'未分组':points.userGroup,
          two:points.points
        }
      }
      content.push(point);
    })
    return content;
  }

  exportExcel(){
    const {pointData, countType,exchange,start,end} = this.state;
    if(pointData.length==0 || !exchange){
      message.info("没有数据");
      return;
    }
    let sheetName=this.sheetName(countType);
    const option={
      fileName:this.fileName(countType,start,end),
      datas:[],
    };

    option.datas= [ {
          sheetData:this.showContent(countType,pointData),
          sheetName:sheetName,
          sheetHeader:this.showHeader(countType)}

      ];
    let toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }

  render() {
    const {pointData, countType,exchange,loading} = this.state;
    return (
      <div className={styles.normal}>
        <div className={styles.search_div}>
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <div className={styles.search_div_time}>
          <Form.Item label={"按组织统计"}>
            <RangePicker onChange={this.dataChange} format={"YYYY-MM-DD 00:00:00"}/>
          </Form.Item>
          </div>
          <div className={styles.search_div_type}>
          <Form.Item
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 14 }}
            label="统计方式">
            <Select placeholder="统计方式" onChange={this.selectRole}>
              <Option value="1">个人</Option>
              <Option value="2">团队</Option>
            </Select>
          </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
              >
                查询
              </Button>
              <Divider type="vertical" />
              <Button
                type="primary"
                onClick={this.exportExcel}
              >
                导出
              </Button>
            </Form.Item>
          </div>
        </Form>
        </div>
          {this.show(pointData,countType,exchange)}
      </div>
    );
  }
}

export default CountPoint;
